<div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
  <button class="close-button" aria-label="Close menu" type="button" data-close>
    <span aria-hidden="true">&times;</span>
  </button>
  <ul class="mobile-ofc vertical menu">

    <li>
      <a href="http://zurb.com/responsive">Showcase</a>
      <ul class="submenu menu vertical" data-submenu>
        <li><a href="http://zurb.com/responsive">Foundation Showcase</a></li>
        <li><a href="http://foundation.zurb.com/showcase/brands.html">Brands</a></li>
        <li><a href="http://foundation.zurb.com/showcase/case-studies.html">Case Studies</a></li>
        <li><a href="http://foundation.zurb.com/showcase/blog.html">Blog</a></li>
        <li><a href="http://foundation.zurb.com/showcase/buzz.html">Buzz</a></li>
        <li><a href="http://foundation.zurb.com/showcase/about.html">About Foundation</a></li>
      </ul>
    </li>

    <li>
      <a href="http://foundation.zurb.com/develop/getting-started.html">Develop</a>
      <ul class="submenu menu vertical" data-submenu>
        <li class="title">Frameworks</li>
        <li><a href="http://foundation.zurb.com/sites.html">Foundation for Sites</a></li>
        <li><a href="http://foundation.zurb.com/emails.html">Foundation for Email</a></li>
        <li class="divider"></li>
        <li class="title">Develop</li>
        <li><a href="http://foundation.zurb.com/templates.html">HTML Templates</a></li>
        <li><a href="http://foundation.zurb.com/sites/resources.html">Resources</a></li>
        <li><a href="http://foundation.zurb.com/develop/building-blocks.html">Building Blocks</a></li>
        <li><a href="http://foundation.zurb.com/develop/contribute.html">Contribute</a></li>
      </ul>
    </li>

    <li>
      <a href="http://foundation.zurb.com/learn/tutorials.html">Tutorials</a>
      <ul class="submenu menu vertical" data-submenu>
        <li><a href="http://foundation.zurb.com/learn/tutorials.html">Tutorials</a></li>
        <li><a href="http://foundation.zurb.com/learn/classes.html">Classes</a></li>
        <li><a href="http://foundation.zurb.com/learn/custom-training.html">Custom Training</a></li>
        <li><a href="http://foundation.zurb.com/learn/certification.html">Certification</a></li>
        <li><a href="http://foundation.zurb.com/learn/responsive-reading.html">Responsive Reading</a></li>
      </ul>
    </li>

    <li>
      <a href="http://foundation.zurb.com/get-involved/support.html">Get Involved</a>
      <ul class="submenu menu vertical" data-submenu>
        <li><a href="http://foundation.zurb.com/get-involved/support.html">Connect</a></li>
        <li><a href="http://foundation.zurb.com/get-involved/premium-support.html">PLZ Halp</a></li>
        <li><a href="http://foundation.zurb.com/forum/sort/unanswered">Foundation Forum</a></li>
        <li><a href="http://foundation.zurb.com/learn/events.html">Events</a></li>
        <li><a href="http://foundation.zurb.com/get-involved/faq.html">FAQs</a></li>
        <li><a href="http://foundation.zurb.com/get-involved/contribute.html">Contribute</a></li>
        <li><a href="http://foundation.zurb.com/get-involved/yetinauts.html">Yetinauts</a></li>
      </ul>
    </li>

    <li>
      <a href="http://foundation.zurb.com/frameworks-docs.html">Docs</a>
      <ul class="submenu menu vertical" data-submenu>
        <li><a href="http://foundation.zurb.com/docs/" target="_blank">Sites Docs</a></li>
        <li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
      </ul>
    </li>

    <li><a href="http://foundation.zurb.com/develop/getting-started.html" class="button">Getting Started</a></li>

  </ul>
</div>

<div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
  <button class="close-button" aria-label="Close menu" type="button" data-close>
    <span aria-hidden="true">&times;</span>
  </button>
  <ul class="vertical menu">
    <li><a href="#">Foundation</a></li>
    <li><a href="#">Dot</a></li>
    <li><a href="#">ZURB</a></li>
    <li><a href="#">Com</a></li>
    <li><a href="#">Slash</a></li>
    <li><a href="#">Sites</a></li>
  </ul>
</div>

<div class="off-canvas position-top" id="offCanvasTop" data-off-canvas data-position="top">
  <button class="close-button" aria-label="Close menu" type="button" data-close>
    <span aria-hidden="true">&times;</span>
  </button>
  <ul class="mobile-ofc vertical menu">
    <li><a href="#">Off-canvas</a></li>
    <li><a href="#">Example</a></li>
    <li><a href="#">Vertical</a></li>
    <li><a href="#">Menu</a></li>
    <li><a href="#">From</a></li>
    <li><a href="#">The</a></li>
    <li><a href="#">Top</a></li>
  </ul>
</div>
